<template>
    <view class="pg-center">
        <view class="w-700 h-auto bg-ffffff rd-16 p-25">
            <view class="fl-ro-cen ju-sta gap-25 flex-wrap">
                <manage-func-item src="../../static/image/应用.svg" name="设备管理" @handle_click="device_on_clock"> </manage-func-item>
                <manage-func-item src="../../static/image/完成.svg" name="订单管理" @handle_click="order_on_clock"> </manage-func-item>
                <!-- <manage-func-item src="../../static/image/播放.svg" name="广告管理" @handle_click="ad_on_clock"> </manage-func-item> -->
            </view>
        </view>
        <view class="w-700 h-auto fl-ro-cen ju-bet gap-20 mt-20">
            <view class="w-340 h-210 fl-ro-cen ju-bet bg-teal-400 rd-10 overflow-hidden p-20" @click="add_goods">
                <text class="fs-50 font-bold text-white">扫码补货</text>
                <image class="w-190 mx-10" src="../../../static/image/货物.svg" mode="widthFix"></image>
            </view>
            <view class="w-340 h-210 fl-ro-cen ju-bet bg-orange-400 rd-10 overflow-hidden p-20" @click="machine_active">
                <text class="fs-50 font-bold text-white w-100">扫码激活</text>
                <image class="w-130 mr-10" src="../../../static/image/扫码付.svg" mode="widthFix"></image>
            </view>
        </view>
        <!-- tabbar -->
        <wd-tabbar v-model="tabbar" @change="tab_change" active-color="#0055ff" inactive-color="#7d7e80" fixed bordered safeAreaInsetBottom placeholder>
            <wd-tabbar-item name="index" title="首页" icon="home"></wd-tabbar-item>
            <wd-tabbar-item name="user" title="我的" icon="user"></wd-tabbar-item>
        </wd-tabbar>
    </view>
</template>

<script setup>
    import { onShow, onLoad } from '@dcloudio/uni-app';
    import { ref } from 'vue';
    import { scanCodeGetSN } from '@/utils/scanCodeGetSN';
    import { api_machin_activate } from '@/api/machine.js';

    //标签的索引值
    const tabbar = ref('');

    //点击设备管理
    const device_on_clock = () => {
        uni.navigateTo({
            url: '/pages/merchant/machine-manage/machine-manage'
        });
    };

    //点击订单管理
    const order_on_clock = (e) => {
        console.log(e);
    };

    //点击广告管理
    const ad_on_clock = (e) => {
        console.log(e);
        uni.navigateTo({
            url: '/pages/merchant/ad-manage/ad-manage'
        });
    };

    //点击扫码补货
    const add_goods = async () => {
        console.log('点击了扫码补货');
        // 调起条码扫描
        try {
            let sn = await scanCodeGetSN();
            console.log('sn:', sn);
            uni.navigateTo({
                url: `/pages/merchant/index/machine-info/machine-info?sn=${sn}`
            });
        } catch (error) {
            uni.showToast({
                title: '识别失败',
                icon: 'none'
            });
        }
    };

    //点击扫码激活
    const machine_active = async () => {
        console.log('点击了扫码激活');
        // 调起条码扫描
        try {
            let sn = await scanCodeGetSN();
            console.log('sn:', sn);

            //访问设备激活接口
            try {
                let res = await api_machin_activate({
                    sn: sn
                });
                uni.showToast({
                    title: res.msg,
                    icon: 'none'
                });
            } catch (error) {
                uni.showToast({
                    title: error.msg,
                    icon: 'none'
                });
            }
        } catch (error) {
            uni.showToast({
                title: '识别失败',
                icon: 'none'
            });
        }
    };

    //点击tabbar
    const tab_change = ({ value }) => {
        uni.switchTab({
            url: `/pages/merchant/${value}/${value}`
        });
    };

    onShow(() => {
        //由于wd-tabbar的bug，进入页面立马手动更新tabbar，实现图标换色
        tabbar.value = 'index';
        console.log(`进入了${tabbar.value}页`);
    });
</script>

<style lang="scss" scoped></style>
